﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link href="css/swiper.min.css" rel="stylesheet" />
    <link href="traveltrip_files/sale.css" rel="stylesheet" />
    <link href="traveltrip_files/main.css" rel="stylesheet" />
    <!-- Demo styles -->
    <style>
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div style="">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div onclick="window.leon.caca()" class="swiper-slide"><img style="width:100%;" src="images/Dubai_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/Egypt_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/france_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/germany_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/greece_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/hcm_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/Hokkaido_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/Dubai_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/france_750x422.jpg" alt="" /></div>
                <div class="swiper-slide"><img style="width:100%;" src="images/hcm_750x422.jpg" alt="" /></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <ul class="ad_list">
        <li data-keyword="北海道"><img src="./traveltrip_files/Hokkaido_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Hokkaido_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="冲绳"><img src="./traveltrip_files/okinawa_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/okinawa_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="大阪"><img src="./traveltrip_files/osaka_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/osaka_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="东京"><img src="./traveltrip_files/tokyo_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/tokyo_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="曼谷"><img src="./traveltrip_files/bangkok_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/bangkok_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="清迈"><img src="./traveltrip_files/chiangmai_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/chiangmai_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="芭堤雅"><img src="./traveltrip_files/Pattaya_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Pattaya_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="普吉岛"><img src="./traveltrip_files/Phuket_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Phuket_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="苏梅岛"><img src="./traveltrip_files/Samui_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Samui_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="巴厘岛"><img src="./traveltrip_files/bali_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/bali_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="马尔代夫"><img src="./traveltrip_files/maldives_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/maldives_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="香港"><img src="./traveltrip_files/hongkong_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/hongkong_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="澳门"><img src="./traveltrip_files/macau_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/macau_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="台湾"><img src="./traveltrip_files/taiwan_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/taiwan_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="毛里求斯"><img src="./traveltrip_files/mauritius_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/mauritius_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="塞舌尔"><img src="./traveltrip_files/Seychelles_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Seychelles_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="迪拜"><img src="./traveltrip_files/Dubai_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Dubai_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="土耳其"><img src="./traveltrip_files/turkey_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/turkey_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="埃及"><img src="./traveltrip_files/Egypt_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Egypt_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="肯尼亚"><img src="./traveltrip_files/Kenya_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Kenya_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="法国"><img src="./traveltrip_files/france_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/france_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="意大利"><img src="./traveltrip_files/Italy_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Italy_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="瑞士"><img src="./traveltrip_files/Switzerland_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Switzerland_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="德国"><img src="./traveltrip_files/germany_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/germany_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="希腊"><img src="./traveltrip_files/greece_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/greece_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="西班牙"><img src="./traveltrip_files/Spain_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Spain_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="俄罗斯"><img src="./traveltrip_files/Russia_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/Russia_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="三亚"><img src="./traveltrip_files/sanya_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/sanya_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="厦门"><img src="./traveltrip_files/xiamen_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/xiamen_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="云南"><img src="./traveltrip_files/yunnan_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/yunnan_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="新加坡"><img src="./traveltrip_files/sg_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/sg_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="吉隆坡"><img src="./traveltrip_files/kl_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/kl_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="沙巴"><img src="./traveltrip_files/sb_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/sb_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="兰卡威"><img src="./traveltrip_files/lkw_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/lkw_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="长滩"><img src="./traveltrip_files/boracay_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/boracay_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="暹粒"><img src="./traveltrip_files/siamreap_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/siamreap_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="斯里兰卡"><img src="./traveltrip_files/sl_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/sl_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="胡志明"><img src="./traveltrip_files/hcm_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/hcm_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="岘港"><img src="./traveltrip_files/xg_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/xg_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="芽庄"><img src="./traveltrip_files/yz_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/yz_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="首尔"><img src="./traveltrip_files/seoul_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/seoul_750x422.jpg" loaded="loaded"></li>
        <li data-keyword="济州岛"><img src="./traveltrip_files/jeju_750x422.jpg" _src="http://images3.c-ctrip.com/dj/dest_pics/jeju_750x422.jpg" loaded="loaded"></li>
    </ul>


    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 30,
            loop: true
        });
    </script>
</body>
</html>